<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :inline="true" :model="queryParams">
        <el-form-item>
          <el-input v-model="queryParams.connName" placeholder="连接名" />
        </el-form-item>
        <el-form-item prop="dbType">
          <el-select
            v-model="queryParams.dbType"
            clearable
            placeholder="数据库类型"
            class="!w-[100px]"
          >
            <el-option value="MySQL" label="MySQL" />
            <el-option value="Oracle" label="Oracle" />
            <el-option value="PostgreSQL" label="PostgreSQL" />
            <el-option value="SQLServer" label="SQLServer" />
            <el-option value="DM" label="达梦8" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button @click="handleQuery()">查询</el-button>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()">
            新增
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="handleDelete()">删除</el-button>
        </el-form-item> -->
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <!-- <template #header>
        <el-button type="success" @click="addOrUpdateHandle()">
          <i-ep-plus />
          新增
        </el-button>
        <el-button
          type="danger"
          :disabled="removeIds.length === 0"
          @click="handleDelete()"
        >
          <i-ep-delete />
          删除
        </el-button>
      </template> -->

      <el-table
        v-loading="loading"
        :data="pageData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        />
        <el-table-column
          prop="connName"
          label="连接名"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="dbType"
          label="数据库类型"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="connUrl"
          label="数据库URL"
          show-overflow-tooltip
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="username"
          label="用户名"
          header-align="center"
          align="center"
        />
        <el-table-column label="密码" header-align="center" align="center">
          <template #default="scope">
            <span>{{ formatPassword(scope.row.password) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          header-align="center"
          align="center"
          width="170"
        >
          <template #default="scope">
            <el-button
              type="primary"
              link
              @click="datasourceHandle(scope.row.id)"
            >
              测试
            </el-button>
            <!-- <el-button
              type="primary"
              link
              @click="addOrUpdateHandle(scope.row.id)"
            >
              编辑
            </el-button>
            <el-button type="primary" link @click="handleDelete(scope.row.id)">
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.current"
        v-model:limit="queryParams.size"
        @pagination="handleQuery"
      />
    </el-card>
    <!-- 弹窗, 新增 / 修改 -->
    <!-- <datasource-from
      v-model:visible="datasourceDialogVisible"
      ref="addOrUpdateRef"
    /> -->
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import DatasourceAPI, {
  DatasourcePageVO,
  DatasourcePageQuery,
} from "@/api/datasource";
import { ElMessage } from "element-plus";
import { decrypt, encrypt } from "@/utils/sm4";

/** 弹窗显示状态 */
const datasourceDialogVisible = ref(false);

/**查询参数 */
const queryFormRef = ref(ElForm);

const loading = ref(false);
const pageData = ref<DatasourcePageVO[]>();
const total = ref(0);
const removeIds = ref([]);
const addOrUpdateRef = ref();

/** 重置查询 */
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.current = 1;
  handleQuery();
}

/**查询参数  */
const queryParams = reactive<DatasourcePageQuery>({
  current: 1,
  size: 10,
});
// 查询菜单
function handleQuery() {
  loading.value = true;
  DatasourceAPI.getPage()
    .then((data) => {
      pageData.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 删除用户 */
function handleDelete(id?: number) {
  const userIds = [id || removeIds.value].join(",");
  if (!userIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除数据源?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    function () {
      loading.value = true;
      DatasourceAPI.deleteByIds(userIds)
        .then(() => {
          ElMessage.success("删除成功");
          handleQuery();
        })
        .finally(() => (loading.value = false));
    },
    function () {
      ElMessage.info("已取消删除");
    }
  );
}

/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

const datasourceHandle = (id: number) => {
  DatasourceAPI.test(id).then((res: any) => {
    ElMessage.success(res);
  });
};

function addOrUpdateHandle(id: number) {
  DatasourceAPI.getFormData(id).then((data) => {
    addOrUpdateRef.value = data;
  });
}

const formatPassword = (str: string): string => {
  return Array(encrypt(str).length).fill("•").join("");
};

onMounted(() => {
  handleQuery();
});
</script>
